import { defineComponent, nextTick, reactive, ref, computed } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import useNavigator from "@/hooks/useNavigator";
import styles from "./insurancePolicyDetailPage.module.less";
import { message } from "ant-design-vue";
import insurancePolicyService from "@/modules/individualOrdersManagement/insurancePolicy/insurancePolicy.service";
export default defineComponent({
  name: "orderDetailPage",
  setup() {
    const navigator = useNavigator();
    const $service = new insurancePolicyService();
    const tabs = reactive({
      list: [
        {
          key: 1,
          tab: "保单信息",
          pane: () => <PolicyInformation />,
        },
        {
          key: 3,
          tab: "客户信息",
          pane: () => <Custom />,
        },
      ],
      actived: 1,
      id: "",
    } as any);
    const state = reactive({
      policylist: [
        {
          name: "所属分公司:",
          value: "",
        },
        {
          name: "合作保险公司:",
          value: "",
        },
        {
          name: "系统保单号:",
          value: "",
        },
        {
          name: "保司保单号:",
          value: "",
        },
        {
          name: "支付时间:",
          value: "",
        },
        {
          name: "承保时间:",
          value: "",
        },
        {
          name: "到期日期:",
          value: "",
        },
        {
          name: "退保时间:",
          value: "",
        },
        {
          name: "退款时间:",
          value: "",
        },
        {
          name: "退款状态:",
          value: "",
        },
        {
          name: "退款金额:",
          value: "",
        },
        {
          name: "支付方式:",
          value: "",
        },
        {
          name: "保费:",
          value: "",
        },
      ],
      custom_param: [],
      product: {
        name: "", //名称
        productType: undefined, //产品分类：
        insuranceType: undefined, //险种分类：
        protection_Name: "",
        product_price: "", //产品价格
        protection: [], //方案数组
        ensure: [], //固定保障规则
        agreement: undefined,
      },
      applicantlist: [
        {
          name: "投保人信息:",
          value: "",
        },
        {
          name: "证件类型:",
          value: "",
        },
        {
          name: "投保人身份证:",
          value: "",
        },
        {
          name: "投保人电话:",
          value: "",
        },
      ],
      order_record: undefined,
      is_btnBool: false,
    } as any);
    message.loading({ content: '加载中...', key: 'loading' });
    $service
      .detail({ order_no: navigator?.route?.query?.order_no })
      .then((res: any) => {
        state.policylist[0].value = res?.data?.department_id?.label || "";
        state.policylist[1].value =
          res?.data?.cooperative_company_id?.label || "";
        state.policylist[2].value = res?.data?.order_no || "";
        state.policylist[3].value = res?.data?.insurance_order_no || "";
        state.policylist[4].value = res?.data?.pay_time || "";
        state.policylist[5].value = res?.data?.insure_time || "";
        state.policylist[6].value = res?.data?.end_date || "";
        state.policylist[7].value = res?.data?.refund_time || "";
        state.policylist[8].value = res?.data?.pay_refund_time || "";
        state.policylist[9].value = res?.data?.refund_status?.label || "";
        state.policylist[10].value = res?.data?.refund_fee || "";
        state.policylist[11].value = res?.data?.pay_type?.label || "";
        state.policylist[12].value = res?.data?.sum_premium || "";
        state.product.name = res?.data?.name || "";
        state.product.productType = res?.data?.type || "";
        state.product.insuranceType = res?.data?.insurance_coverage || "";
        state.product.ensure = res?.data?.ensure || [];
        state.custom_param = res?.data?.custom_param || [];
        if (res?.data?.product_protection?.name && res?.data?.product_protection?.desc) {
          state.product.protection_Name =
            res?.data?.product_protection.name +
            "(" +
            res?.data?.product_protection.desc +
            ")";
        }

        state.product.protection =
          res?.data?.product_protection?.protection || res?.data?.product_protection;
        state.product.agreement = res?.data?.cooperative_contract_id?.label || undefined;
        state.product.product_price = res?.data?.product_price || "";
        state.applicantlist[0].value = res?.data?.applicant_name || "";
        state.applicantlist[1].value =
          res?.data?.applicant_id_type?.label || "";
        state.applicantlist[2].value = res?.data?.applicant_id_no || "";
        state.applicantlist[3].value = res?.data?.applicant_mobile || "";
        state.insuredlist = [
          {
            name: `与被保人关系:`,
            value: res?.data?.identity?.label || "",
          },
          {
            name: `被保人姓名:`,
            value: res?.data?.insured_name || "",
          },
          {
            name: `证件类型`,
            value: res?.data?.insured_id_type?.label || "",
          },
          {
            name: `被保人身份证:`,
            value: res?.data?.insured_id_no || "",
          },
          {
            name: `被保人电话:`,
            value: res?.data?.insured_mobile || "",
          },];
      }).finally(() => {
        message.success({ content: '加载完成!', key: 'loading', duration: 2 });
      })
    //保单信息
    const PolicyInformation = () => (
      <div class={styles.policyBox}>
        {state.policylist.map((item: any) => {
          return (
            <div class={styles.policyRowBox}>
              <div class={styles.policyLeftBox}>{item.name}</div>
              <div class={styles.policyRightBox}>
                <a-input disabled v-model={[item.value, "value"]} />
              </div>
            </div>
          );
        })}
        {
          state.custom_param?.map?.((item: any) => {
            return (
              <div class={styles.policyRowBox}>
                <div class={styles.policyLeftBox}>{item.param_label}</div>
                <div class={styles.policyRightBox}>
                  <a-input disabled v-model={[item.param_value, "value"]} />
                </div>
              </div>
            );
          })
        }
      </div>
    );
    //产品信息
    const richEditRef = ref(null as any);
    const FixedGuaranteeTable = ({ pn, pl, op, pad = "10px 0" }: any) => (
      <div class={styles.planConfRowBox}>
        <div class={styles.guaranteeContent} style={{ padding: pad }}>
          {pn && pn()}
        </div>
        <div class={styles.planContent} style={{ padding: pad }}>
          {pl && pl()}
        </div>
      </div>
    );
    //方案保障
    const Programme = ({ pn, pl, op, pad = "10px 0" }: any) => (
      <div class={styles.planConfRowBox}>
        <div class={styles.programmeContent} style={{ padding: pad }}>
          {pn && pn()}
        </div>
        <div class={styles.pguaranteeContent} style={{ padding: pad }}>
          {pl && pl()}
        </div>
      </div>
    );
    const Products = () => (
      <div class={styles.policyBox}>
        <div class={styles.policyRowBox}>
          <div class={styles.policyLeftBox}>产品名称:</div>
          <div class={styles.policyRightBox}>
            <a-input disabled v-model={[state.product.name, "value"]} />
          </div>
        </div>
        <div class={styles.policyRowBox}>
          <div class={styles.policyLeftBox}>产品分类:</div>
          <div class={styles.policyRightBox}>
            <a-input disabled v-model={[state.product.productType, "value"]} />
          </div>
        </div>
        <div class={styles.policyRowBox}>
          <div class={styles.policyLeftBox}>险种分类:</div>
          <div class={styles.policyRightBox}>
            <a-input
              disabled
              v-model={[state.product.insuranceType, "value"]}
            />
          </div>
        </div>
        <div class={styles.policyRowBox}>
          <div class={styles.policyLeftBox}>方案名称:</div>
          <div class={styles.policyRightBox}>
            <a-input
              disabled
              v-model={[state.product.protection_Name, "value"]}
            />
          </div>
        </div>
        <div class={styles.policyRowTopBox}>
          <div class={styles.policyLeftBox}>方案内容:</div>
          <div class={styles.planConfBody}>
            <div class={styles.planConfBox}>
              <Programme
                pn={() => <div class={styles.planConLabel}>方案保障内容</div>}
                pl={() => <div class={styles.planConLabel}>保障内容</div>}
              />
              {state.product.protection?.map?.((x: any, index: any) => {
                return (
                  <Programme
                    pn={() => (
                      <div
                        style={{
                          width: "100%",
                          padding: "0 5px",
                        }}
                      >
                        {x.name}
                      </div>
                    )}
                    pl={() => (
                      <div
                        style={{
                          width: "100%",
                          padding: "0 5px",
                        }}
                      >
                        {x.protect_field}
                      </div>
                    )}
                    pad="5px 0"
                  />
                );
              })}
            </div>
          </div>
        </div>
        <div class={styles.policyRowBox}>
          <div class={styles.policyLeftBox}>产品价格:</div>
          <div class={styles.policyRightBox}>
            <a-input
              disabled
              v-model={[state.product.product_price, "value"]}
            />
          </div>
        </div>
        <div class={styles.policyRowTopBox}>
          <div class={styles.policyLeftBox}>固定保障规则:</div>
          <div class={styles.planConfBody}>
            <div class={styles.planConfBox}>
              <FixedGuaranteeTable
                pn={() => <div class={styles.planConLabel}>规则名称</div>}
                pl={() => <div class={styles.planConLabel}>规则内容</div>}
              />
              {state.product.ensure?.map?.((x: any, index: any) => {
                return (
                  <FixedGuaranteeTable
                    pn={() => (
                      <div
                        style={{
                          width: "100%",
                          padding: "0 5px",
                        }}
                      >
                        <a-input
                          placeholder="请输入规则名称"
                          disabled
                          v-model={[x.name, "value"]}
                        />
                      </div>
                    )}
                    pl={() => (
                      <div
                        style={{
                          width: "100%",
                          padding: "0 5px",
                        }}
                      >
                        <a-input
                          placeholder="请输入规则内容"
                          disabled
                          v-model={[x.content, "value"]}
                        />
                      </div>
                    )}
                    pad="5px 0"
                  />
                );
              })}
            </div>
          </div>
        </div>
        <div class={styles.policyRowBox}>
          <div class={styles.policyLeftBox}>关联协议:</div>
          <div class={styles.policyRightBox}>
            <a-select disabled v-model={[state.product.agreement, "value"]} />
          </div>
        </div>
      </div>
    );
    //客户信息
    const Custom = () => (
      <div class={styles.customBox}>
        <div class={styles.applicantBox}>
          <div class={styles.headBox}>投保人信息：</div>
          <div class={styles.bodyBox}>
            <div class={styles.insuredRow}>
              {state.applicantlist.map((item: any) => {
                return (
                  <div class={styles.rowBox}>
                    <div class={styles.customLeftBox}>{item.name}</div>
                    <div class={styles.customRightBox}>
                      <a-input disabled v-model={[item.value, "value"]} />
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
        <div class={styles.applicantBox}>
          <div class={styles.headBox}>被保人信息：</div>
          <div class={styles.bodyBox}>
            <div class={styles.insuredRow}>
              {state?.insuredlist?.map((item: any, index: any) => {
                return (
                  <div class={styles.rowBox}>
                    <div class={styles.customLeftBox}>{item.name}</div>
                    <div class={styles.customRightBox}>
                      <a-input disabled v-model={[item.value, "value"]} />
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    );
    return () => (
      <Page>
        <CardWithTitle title="保单详情">
        <div class={styles.body_box}>
          <a-tabs
            class={styles.detailTabs}
            v-model={[tabs.actived, "activeKey"]}
            type="card"
            onChange={() => {
            }}
          >
            {tabs.list.map((x: any) => (
              <a-tab-pane class={styles["tab-pane"]} key={x.key} tab={x.tab}>
                {x.pane && x.pane()}
              </a-tab-pane>
            ))}
          </a-tabs>
          <div class={styles.btn_box}>
              <a-button onClick={()=>{
                navigator.back();
              }}>关闭</a-button>
            </div>
          </div>
        </CardWithTitle>
      </Page>
    );
  },
});